<template>
  <textarea
    class="textarea border-none w100 bc1 white"
    :rows="state.rows"
    cols="20"
    v-model="state.input"
  ></textarea>
</template>

<script>
import { reactive, watch } from "vue";

export default {
  // 父组件传值
  props: {
    msg: Object,
  },
  // 事件抛出组
  emits: ["textarea-input"],
  // 钩子
  setup(props, { emit }) {
    // 双向绑定数据
    const state = reactive({
      id: props.msg.id ? props.msg.id : 0,
      rows: props.msg.rows ? props.msg.rows : "3",
      input: "",
    });
    // 输入监听
    watch(
      () => state.input,
      // 接收参数 newValue, oldValue
      (newValue) => {
        // 输入值回传父组件
        emit("textarea-input", { [state.id]: newValue });
      }
    );
    watch(
      () => props.msg,
      (newValue) => {
        state.id = props.msg.id;
        state.rows = props.msg.rows;
      }
    );
    // 传入模板
    return { state };
  },
};
</script>
